<template>
  <div style="height:100%">
    <vxe-grid
      ref="vux-table"
      border
      resizable
      :filter-config="{ iconNone:'vxe-icon--search',iconMatch: 'vxe-icon--search'}"
      :loading="form.isLoading"
      :columns="form.colunms"
      :data="form.data"
      :header-cell-style="headerCellStyle"
      :row-style="rowStyle"
      auto-resize
      height="auto"
      round
      @checkbox-change="e => $emit('checked-change', e)"
    >
      <template #pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="form.request.pageIndex"
          :page-size.sync="form.request.pageSize"
          :total="form.request.total"
          @page-change="form.pageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },

  methods: {
    headerCellStyle() {
      return {
        backgroundColor: '#f7f8fa',
        color: '#333333',
        height: '54px'
      };
    },

    rowStyle({ rowIndex }) {
      // const bgColor = rowIndex % 2 === 0 ? '#FFFFFF' : '#F5F5F5';
      return {
        backgroundColor: '#FFFFFF',
        fontWeight: 600,
        height: '54px'
      };
    },

    tableRef() {
      return this.$refs['vux-table'];
    },

    refreshTableConfig() {
      // this.tableRef().loadColumn(this.form.colunms);
      // this.tableRef().reloadColumn().then(res => {
      //   console.log(res);
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.vxe-grid{
  height: 100%;
}
</style>
